<template>
	<view class="selectSupplier">
		<view :style="'height:'+statusBarHeight+'px;'">
		</view>
		<view style="height: 88rpx;"></view>
		<view class="nav flex-center-center">
			<image @click="back" class="nav-icon" src="../../../static/images/nav-left.png" mode=""></image>
			<text style="margin-left: 302rpx;">选择品牌</text>
			<text class="submit" @click="onSubmit">确认</text>
		</view>
		<view v-for="(par,parIndex) in list" :key="parIndex" class="part">
			<view class="type">
				{{par.type}}
			</view>
			<view v-for="(item,index) in par.children" @click="onSelect(item,index)" :key="index"
				:class="{'active':item.isSelect}" class="children ">

				<view style="max-width: 600rpx;" class="exceedingEllipsis">
					{{item.title}}
				</view>
				<image v-if="item.isSelect" class="icon" src="../../../static/images/my/select.png" mode=""></image>
			</view>
		</view>
		<view style="height: 140rpx;"></view>
		<view :style="'height:'+safeAreaBottom+'px'"></view>
		<view :style="'height:'+safeAreaBottom+'px;margin-bottom:32rpx;'">

		</view>
		<view @click="show=true" :style="'bottom:'+safeAreaBottom+'px'" class="bottom">
			新增品牌
		</view>
		<u-popup v-model="show" mode="center" border-radius="16">
			<view class="content">
				<view class="title">新增品牌</view>
				<view class="bg">
					<u-input placeholder-style="color: #666666" v-model="title" input-align="center" height="92"
						placeholder="请输入品牌名称" type="text" :border="border" />
				</view>
				<view class="popBottom flex-center-between">
					<view @click="show=false" class="popBottom-cancel">取消</view>
					<view @click="addBrandList" class="popBottom-submit">确定</view>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import api from '@/api/index.js';
	export default {
		data() {
			return {
				list: [],
				selectList: [],
				show: false,
				safeAreaBottom: uni.getStorageSync('safeAreaBottom'),
				statusBarHeight: uni.getStorageSync('statusBarHeight'),
				border: false,
				title: '',
			};
		},
		onLoad(options) {
			if (options.selectList) {
				this.selectList = JSON.parse(decodeURIComponent(options.selectList));
				console.log('selectLsit', this.selectList)
			};
			this.getData();
		},
		methods: {
			getData() {
				api.base.getDev_applyGetBrandList().then(res => {
					console.log('品牌', res.data)
					this.list = res.data;
					this.list.map(item => {
						item.children.map(child => {
							child.isSelect = false;
						});
					});
					this.list.map(item => {
						this.selectList.map(s => {
							
							if (item.type == s.type && item.children.length == s.children.length) {
								item.children = s.children;
							} else {
								// console.log(item,s,99)
								item.children.map(son => {
									if(s.children){
										s.children.map(son1 => {
											if (son.id == son1.id) {
												son = son1
											}
										})
									}else{
										if(son.id == s.id){
											son.isSelect = true;
										}
										console.log(son,777)
										console.log(s)
									}
								
								})
							}
						})
					})
					this.$forceUpdate()
				});
			},
			onSelect(item, index) {
				item.isSelect = !item.isSelect;
				this.$forceUpdate();
			},
			addBrandList() {
				if (!this.title) {
					uni.showToast({
						icon: 'none',
						title: '请输入品牌名称'
					});
					return;
				};
				let that = this;
				api.base.getDev_applyAddBrand({
					title: this.title
				}).then(res => {
					console.log('添加品牌', res.data)
					that.title = '';
					that.show = false;
					uni.showToast({
						icon: 'none',
						title: '新增成功'
					})
					that.getData();
				});
			},
			back() {
				uni.navigateBack()
			},
			onSubmit() {

				uni.navigateBack();
				console.log('发送list', this.list)
				setTimeout(() => {
					uni.$emit('list', this.list);
				}, 1000)
				// let list = JSON.stringify(this.list);
				// uni.redirectTo({
				// 	url: '/pages/my/institution/index?list=' + encodeURIComponent(list)
				// })
			}
		}
	}
</script>

<style lang="scss" scoped>
	.selectSupplier {

		// position: relative;
		.nav {
			position: fixed;
			top: 0;
			font-size: 34rpx;
			font-family: PingFang SC-Bold, PingFang SC;
			font-weight: bold;
			color: #333333;
			background-color: #ffffff;

			.submit {
				margin-left: 220rpx;
				font-size: 30rpx;
				font-family: PingFang SC-Medium, PingFang SC;
				font-weight: 500;
				color: #6D0CF7;
			}
		}

		.part {
			width: 100vw;

			.type {
				width: 100%;
				font-size: 24rpx;
				font-family: PingFang SC-Medium, PingFang SC;
				font-weight: 500;
				color: #333333;
				line-height: 28rpx;
				height: 66rpx;
				line-height: 66rpx;
				padding-left: 32rpx;
				box-sizing: border-box;
			}

			.children {
				display: flex;
				align-items: center;
				width: 100%;
				height: 88rpx;
				background: #FFFFFF;
				border-bottom: 1rpx solid #F5F5F5;
				padding-left: 32rpx;
				box-sizing: border-box;
				line-height: 88rpx;
				font-size: 28rpx;
				font-family: PingFang SC-Medium, PingFang SC;
				font-weight: 500;
				color: #333333;
				line-height: 33rpx;

				.icon {
					width: 40rpx;
					height: 40rpx;
					margin-left: 16rpx;
				}
			}

			.active {
				color: #6D0CF7;
			}

		}

		.bottom {
			width: 622rpx;
			height: 88rpx;
			background: #6D0CF7;
			border-radius: 24rpx 24rpx 24rpx 24rpx;
			font-size: 28rpx;
			font-family: PingFang SC-Medium, PingFang SC;
			font-weight: 500;
			color: #FFFFFF;
			line-height: 88rpx;
			text-align: center;
			position: fixed;
			left: 50%;
			transform: translateX(-50%);
			margin-bottom: 32rpx;
		}

		.content {
			width: 622rpx;
			padding: 48rpx 32rpx;
			background: #ffffff;
			min-height: 400rpx;

			.title {
				height: 44rpx;
				font-size: 32rpx;
				font-family: PingFang SC-Medium, PingFang SC;
				font-weight: 500;
				color: #151515;
				line-height: 38rpx;
				text-align: center;
			}

			.popBottom {
				width: 558rpx;

				&-cancel {
					width: 263rpx;
					height: 72rpx;
					background: #f5f5f5;
					border-radius: 36rpx 36rpx 36rpx 36rpx;
					font-size: 28rpx;
					font-family: PingFang SC-Medium, PingFang SC;
					font-weight: 500;
					color: #333333;
					line-height: 72rpx;
					text-align: center;
				}

				&-submit {
					width: 263rpx;
					height: 72rpx;
					background: #6d0cf7;
					box-shadow: 4rpx 4rpx 12rpx 2rpx rgba(171, 181, 197, 0.06);
					border-radius: 36rpx 36rpx 36rpx 36rpx;
					font-size: 28rpx;
					font-family: PingFang SC-Medium, PingFang SC;
					font-weight: 500;
					color: #ffffff;
					line-height: 72rpx;
					text-align: center;
				}
			}
		}

		.bg {
			background: #F5F5F5;
			border-radius: 12rpx 12rpx 12rpx 12rpx;
			margin: 48rpx auto;
		}
	}
</style>